<template>
  <div>
    <div class="top">
      <van-nav-bar title="证件号注册" 
      left-text="返回" 
      left-arrow @click-left="onClickLeft"
      />
    </div>
    <div >
      <van-notice-bar :scrollable="false" text="提示：请报考的考生用本人证件号注册。" />
    </div>
  <div>
    <!-- 输入任意文本 -->
    <van-field v-model="text" label="证件类型"  placeholder="二代身份证"/>
    <!-- 输入手机号，调起手机号键盘 -->
    <van-field v-model="tel" type="tel" label="证件号码" placeholder="注册成功不能更改"/>
    <!-- 允许输入数字，调起带符号的纯数字键盘 -->
    <van-field v-model="password" type="password" label="登录密码" placeholder="请输入6到18位密码" />
    <!-- 输入密码 -->
    <van-field v-model="password" type="password" label="确认密码" placeholder="在次输入密码"/>
    <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
      6-18位，必须同时包含数字、小写和大写字母
    </van-notice-bar>
    </div>
    <div>
    <van-field
      v-model="fieldValue"
      is-link
      readonly
      label="安全问题"
      placeholder="请选择安全问题"
      @click="show = true"
    />
<van-popup v-model="show" round position="bottom">
  <van-cascader
    v-model="cascaderValue"
    title="请选择所在地区"
    :options="options"
    @close="show = false"
    @finish="onFinish"
  /> 
</van-popup>
<van-cell-group>
  <van-field
    v-model="value2"
    clearable
    label="问题答案"
    placeholder="请牢记问题答案，可用于找回密码"
  />
</van-cell-group>
<div>
<van-field
  v-model="sms"
  center
  clearable
  label="动态码"
  placeholder="请输入动态码"
>
  <template #button>
    <div @click="resetCode()">
        <registerCode  :identifyCode="code" :contentWidth="100" :contentHeight="40"></registerCode>
    </div>
  </template>
</van-field>
</div>
<div>
    <van-notice-bar color="#1989fa" background="#ecf9ff"> 
      <van-checkbox v-model="checked" shape="square">我已阅读并同意<span style="color:rgba(42, 130, 228, 1)">《用户注册协议》</span> </van-checkbox>
    </van-notice-bar>
</div>
<div class="register">
    <div style="margin-top: 16px;">
    <van-button type="info" style="width: 345px;" @click="Mobile">注册</van-button><br>
    <van-button type="default" style="width: 345px; margin-top: 20px;" @click="Mobileq">手机号注册</van-button>
  </div>
</div>

    </div>
  </div>
</template>

<script>
import registerCode from "@/components/code"
export default {
  components:{
    registerCode
  },
  data() {
      return {
        code:"",              
        tel: '',
        text: '',
        digit: '',
        number: '',
        password: '',
        show: false,
        fieldValue: '',
        value2: '',
        sms:'',
        checked: false,
        cascaderValue: '',
        // 选项列表，children 代表子选项，支持多级嵌套
        options: [
          {
            text: '浙江省',
            value: '330000',
            children: [{ text: '杭州市', value: '330100' }],
          }
        ],
      };
  },
  mounted(){
    this.resetCode();
  },
  methods: {
  /**
   * 重置验证码
   */
    resetCode(){
      this.code="";
      const codeList="zxcvbnmasdfghjklqwertyuiop1234567890";
      for(let i= 0; i<4;i++){
        let random =  Math.floor((Math.random() * codeList.length) + 0);
        this.code+=codeList[random]
      }
    
    },
    Mobile(){
      this.$router.push('/Mobile')
    },
    onClickLeft() {
      this.$router.push({path:'/'})
    },
    Mobileq(){
      this.$router.push({path:'Mobilea'})
    },
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
    },
  },
}
</script>

<style scoped>
.register{
  text-align: center;
}
</style>